// 安装过程
<template>
    <f7-page class="common-page page-tab has-bottom-btns">
      <f7-navbar>
          <f7-nav-left>
              <f7-link back icon-material="chevron_left" force></f7-link>
          </f7-nav-left>
          <f7-nav-title>中止作业</f7-nav-title>
          <f7-nav-right></f7-nav-right>
      </f7-navbar>
      <div class="common-page-content">
        <van-tabs sticky>
          <van-tab name="#tab1" title="中止申请">
            <!-- 中止申请 -->
            <div id="tab1" class="p15">
                  <div class="qzjx-card tab1-check">
                    <div class="top-box df-layout aic jcsb hasBorder">
                      <div class="label" style="font-weight:600">中止作业说明</div>
                    </div>
                    <template>
                      <div class="df-box">
                        <div class="index">1</div>
                        <div class="right-content-box">
                          <div class="title">中止作业时间</div>
                          <van-field
                            readonly
                            clickable
                            name="calendar"
                            :value="models.process.stopTime"
                            placeholder="点击选择日期"
                            @click="!canEdit?'':showCalendar = true"
                            right-icon="arrow"
                          />
                          <van-calendar v-model="showCalendar" @confirm="onConfirm" color="#1990FF"/>
                        </div>
                      </div>
                      <div class="df-box" v-if="canEdit">
                        <div class="index">2</div>
                        <div class="right-content-box">
                          <div class="title">中止原因</div>
                          <ul class="check-box-list">
                            <li 
                              v-for="(item,index) in controlData.stopWorkReason" 
                              :key="item.code"
                              :class="{active:item.name==models.process.stopReason}"
                              @click="!canEdit?'':models.process.stopReason=item.name;models.process.stopReason=item.name"
                            > 
                              {{index+1}}.{{item.name}}
                              <van-icon name="success" v-if="item.name==models.process.stopReason"/>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="df-box" v-else>
                        <div class="index">2</div>
                        <div class="right-content-box">
                          <div class="title">中止原因</div>
                          <ul class="check-box-list">
                            <li>{{models.process.stopReason}}</li>
                          </ul>
                        </div>
                      </div>
                      <!-- <v-check-list-all
                        v-if="taskCode&&models.model"
                        typeCode="EQM_STOP_WORK"
                        :dataKey="$f7route.query.caseId||models.model.caseId"
                        uploadId="list1"
                        :galleryOptions="{ multiple: true}" 
                        @success="(val)=>list$1=val"
                        :defaultIndex="2"
                        :disabled="!canEdit"
                        :showEmpty="false"
                        :showCardClass="false"
                        style="margin-top:20px;"
                        :attachCraneType="controlData.property.equipmentType"
                      /> -->
                      <v-picture-item
                        v-for="(item,index) in list$1"
                        :key="'list$1'+index"
                        :index="index"
                        :props="{ name: 'customName' }"
                        :item="item"
                        :dataKey="models.model.caseId"
                        :bizType='item.bizType'
                        listName="list$1"
                        :disabled="!canEdit"
                        :isDefaultFile="true"
                        :defaultIndex="2"
                        style="margin-top: 15px;"
                        :address="address"
                      />
                    </template>
                  </div>
            </div>
          </van-tab>
          <van-tab name="#tab2" title="流程进度">
            <!-- 流程进度 -->
            <div id="tab2" class="p15">
                <section class="qzjx-card">
                  <div class="title" style="font-size:16px;">业务流程</div>
                  <v-workflow-step :data="history"></v-workflow-step>
                </section>
                <section class="qzjx-card">
                  <div class="title" style="font-size:16px;">操作记录</div>
                  <v-workflow-list :data="controlData.workflow.history"></v-workflow-list>
                </section>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <f7-toolbar position="bottom" no-shadow class="fff" v-if="pageAction=='edit'">
        <template v-if="canEdit">
          <f7-button fill class="submit-btn" @click="fnCheck('showPinion1')">提交</f7-button>
        </template>
        <template v-else>
          <f7-button fill class="submit-btn plain-btn" @click="fnCheck('showPinion')">退回</f7-button>
          <f7-button fill class="submit-btn" @click="fnCheck('showPinion1')">通过</f7-button>
        </template>
      </f7-toolbar>
      <!-- 审核意见 -->
        <v-popup-opinion
            v-model="showPinion"
            :selectUser="selectUser"
            ref="opinion"
            @save="saveBack"
        >
        </v-popup-opinion>
        <!-- 审核意见 end -->
        <v-popup-opinion
            v-model="showPinion1"
            :selectUser="selectUser"
            ref="opinion"
            @save="savePass"
        >
        </v-popup-opinion>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController"
import Config from "@/libs/config.js";
export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: ["/workflow/serviceGuideExt/getEntityByCode","/equipment/eqmStopWork/workflow/getWorkflowViewModel"],
        };
    }

    onInit () {
      this.$params.appCode = "stopWork";
    }
    onBeforeQuery (type, conditions, params) { }
    onAfterQuery (type, isSuccess, result) {
      if(type=='form'){
        if(result.controlData.progress){
          this.context.history=result.controlData.progress.data
          this.context.taskCode=result.controlData.progress.taskCode
        }else{
          this.context.history=[]
        }
      }else{
        if(result.models.process.stopTime){
          result.models.process.stopTime=this.vm.$formatter.formatDate(result.models.process.stopTime, 'yyyy-MM-dd')
        }
        this.vm.getFileList(
          'EQM_STOP_WORK',
          result.models.model.caseId,
          'list$1',
          result.controlData.property.equipmentType
        )
      }
      return result;
    }
    mixin () {
        return {
          components: {},
            data () {
                return {
                  taskCode:'',
                  activeStopCode:'',
                  showCalendar:false,
                  history:[
                    {taskName:'中止作业填写',taskDesc:'安装单位填写中止作业原因',isActive:2},
                    {taskName:'施工总包审核',taskDesc:'施工总包单位审核中止作业信息',isActive:2},
                    {taskName:'监理审核',taskDesc:'监理单位核中止作业信息信息',isActive:0},
                  ],
                  detectDic:{
                    content:'安全措施',
                    detectDictItems:[
                      {name:'配电箱断电照片',code:'equit'},
                      {name:'上锁照片',code:'equit1'},
                      {name:'禁止使用挂牌照片',code:'equit2'},
                    ]
                  },
                  models: {
                    process:{
                      checkTime:'',
                      isRequire:true,
                      checkMemo:''
                    },
                  },
                  controlData:{
                    property:{},
                    workflow:{},
                    engineeBaseInfo:{},
                    maintenanceOrg:{},
                    installOrg:{},
                  },
                  showPinion:false,
                  showPinion1:false,
                  selectUser: {
                    selectComment: null,
                    comment: null,
                    comments: [],
                    tran: [],
                    activity: "",
                    users: [],
                  },
                  list$1:[],
                  address:'',
                };
            },
            created () {
              this.loadLocation()
            },
            methods: {
              //获取地址
              loadLocation() {
                  let self = this
                  self.$util.getCurrentPosition(
                      (pos) => {
                          if (pos.addresses) {
                              self.address = pos.addresses
                          }else if(pos.data) {
                              self.address = pos.data.name
                          }
                      },
                      (error) => {
                          // self.$f7.dialog.toast(
                          //     '获取定位失败,请确认是否授权定位功能'
                          // )
                      }
                  )
              },
              getFileList(typeCode,dataKey,name,attachCraneType){
                this.$f7.request.post(
                  '/admin/attachmentFormDetail/listUpload', 
                  {typeCode,dataKey,attachCraneType}, 
                  (r) => {
                    r = JSON.parse(r);
                    if (r?.success&&r.parameters.fileList) {
                      this[name]=r.parameters.fileList
                      return 
                    }
                    this[name]=[]
                    this.$framework.$f7.dialog.toast("获取文件失败");
                  }
                );
              },
              onConfirm(date) {
                this.models.process.stopTime = this.$formatter.formatDate(date, 'yyyy-MM-dd');
                this.showCalendar = false;
              },
              fnCheck(show){
                this[show]=true
              },
              saveBack(){
                this.$f7.preloader.show();
                this.super.fnBackJump(
                  this.selectUser.comment,
                  (result) => {
                    this.$f7.preloader.hide();
                    if (result.success) {
                      this.showPinion=false
                      this.refreshData('退回成功')
                    }else{
                      this.$f7.dialog.alert(result.message)
                    }
                  },
                  (e)=>{
                    console.log('退回失败---',e);
                    this.$f7.preloader.hide();
                  },
                  'usertask1'
                )
              },
              refreshData(msg) {
                this.$f7.dialog.alert(msg, () => {
                  this.$f7.popup.close();
                  this.$f7.views.current.router.back({force:true})
                })
              },
              savePass(){
                this.showPinion1=false
                this.send();
              },
            },
            computed: {
              canEdit(){
                return this.pageAction=='edit'&&this.taskCode=='usertask1'?true:false
              },
            },
            mounted () {},
        };
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
.common-page{
  .submit-btn {
      flex: 1;
      margin: 0 10px;
      border-radius: 24px;
  }
  /deep/.van-radio-group{
    display: flex;
    align-items: center;
    .van-radio{
      flex: 1;
      padding: 10px 15px;
      border: 1px solid #D7DCE4;
      border-radius: 20px;
      &:first-child{
        margin-right: 10px;
      }
    }
  }
  .df-box{
    display: flex;
    .index{
      flex-shrink: 0;
      width: 25px;
      height: 22px;
      background: rgba(51, 133, 255, 0.1);
      color: #3385FF;
      margin-right: 15px;
      text-align: center;
      line-height: 22px;
      font-size: 12px;
    }
    .right-content-box{
      flex: 1;
      .title{
        font-weight: 400!important;
      }
    }
  }
  /deep/ .van-field.van-cell{
    background-color: #F5F7FA;
    border: 1px solid #E4E8EB;
    border-radius: 4px;
  }
  /deep/ .van-notice-bar__content{
    font-size: 12px;
    font-weight: 400;
  }
  .qzjx-card{
    .label{
      color: #333333;
    }
    .value /deep/.van-icon{
      color: #B5BCCA;
      margin-left: 10px;
    }
    .van-switch{
      position: relative;
      &::after,&::before{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 12px;
      }
      &::after{
        content:'否';
        right: 5px;
      }
      &.van-switch--on{
        &::before{
          content:'是';
          left: 5px;
        }
      }
    }
    &.tab1-check{
      .top-box{
        &.hasBorder{
          padding-bottom: 10px;
          border-bottom: 1px solid #E9EDF7;
        }
        .value{
          display: flex;
          align-items: center;
        }
      }
      .df-box{
        margin-top: 20px;
        .check-box-list{
          li{
            padding: 12px;
            margin-bottom: 5px;
            background: rgba(215, 220, 228, 0.2);
            border-radius: 3px;
            color: #61677A;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &.active{
              color: #1990FF;
              background: rgba(25, 144, 255, 0.1);
            }
            .van-icon{
              color: #1990FF;
            }
          }
        }
      }
    }
  }
  /deep/ .accordion{
    background: #fff;
    margin-top: 10px!important;
  }
  /deep/ .van-icon{
    margin-left: 0!important;
  }
  #tab4 /deep/.upload-box{
    display: flex;
    .pic_upload{
      width: auto;
    }
  }
  .upload-ul{
    display: flex;
    flex-wrap: wrap;
    li{
      width: 90px;
      height: 76px;
      border-radius: 5px;
      background: #F5F8FF;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #8995AC;
      font-size: 14px;
      margin-right: 10px;
      &:last-child{
        margin-right: 0;
      }
      span:nth-child(1){
        color: #333333;
        margin-bottom: 5px;
        &.toSure{
          font-weight: 300;
          color: #909DB6;
        }
      }
    }
  }
}
</style>
